<template>
  <div id="container">
    <!-- <slotScope>
      <template v-slot:scope="{a}">
        <h1 v-for="(item,index) in a"
        :key="index">
        {{ item }}
        </h1>
      </template>
    </slotScope> -->

    <modal :visible="visible" @on-cancel="cancel"
    @on-confirm="confirm"></modal>
<fieldset>
  <legend>app</legend>
    <button @click="showMondal">点击显示模态框</button>
    <mixCom></mixCom> 
</fieldset>
 
    <!-- <dynamicCom></dynamicCom> -->
    <tab></tab>

  </div>
</template>
<script>
// 插槽作用域流程
// 1.在solt标签上；动态邦订一个属性

// 2.在组件标签中间的内容，template上加上表达式v-solt='data',data
// 是一个对象里面的属性就是solt动态传递的属性


import slotScope from "../slotScope"; //index.vue可省略
import modal from "../modal";
import mixCom from "../minCom"
import dynamicCom from "../dynamicCom/index.vue"
import tab from "../tab/index.vue"

export default {
  data () {
    return {
      visible:false
    }
  },
 
  components: {
    //注册后引入
    tab,
    slotScope,
    dynamicCom,
    modal,
    mixCom,


  },
  methods: {
    showMondal(){ 
      this.visible=true
    },
    // 模态框点击确定的处理函数
    cancel(){
    
      this.visible=false
      alert('已取消')
    },
        // 模态框点击取消的处理函数
    confirm(){
      this.visible=false
      alert('提交成功')
    },
  },
  
  mounted(){
   this.$nextTick(()=>{
    console.log(this.a,"iiii");
   })
  }
};
</script>